<template>
  <div class="navbar-container">
    <div class="navbar-top">
      <div class="navbar-header">
        <img :src="GlobalConfig.logoPath || Logo"/>
        <span>{{ GlobalConfig.title || 'MateChat' }}</span>
      </div>
      <div class="dividing-line"></div>
      <div class="chat-box">
        <template v-for="item in navs" :key="item.id">
          <div class="chat-icon-box" :class="{
            'active': item.id === activeNav,
            'disabled': item.disabled,
            }" @click="clickNav(item.id)">
            <img :src="item.src" :alt="item.id"/>
            <span class="chat-icon-box-disabled" v-if="item.disabled">×</span>
            <span class="chat-icon-box-test" v-if="item.test">test</span>
          </div>
          <span>{{ $t(item.titleI18) }}</span>
        </template>
      </div>
    </div>
    <div class="navbar-bottom">
      <SwitchLang v-if="!GlobalConfig.language"/>
      <Theme v-if="!GlobalConfig.theme"/>
      <d-popover :position="['right']" trigger="hover">
        <template #content>
          <span class="devui-text">{{ $t('navbar.systemSetting') }}</span>
        </template>
        <div class="switch-lang-container">
          <i class="icon-setting system-setting"/>
        </div>
      </d-popover>
    </div>
  </div>
</template>

<script setup lang="ts">
import GlobalConfig from '@/global-config'
import { Theme } from '@/view/theme'
import SwitchLang from './switch-lang.vue'
import Logo from '../../../public/logo.svg'
// import { useRoute, useRouter } from 'vue-router'
import { onMounted, Ref } from 'vue'
import myRouter from '@/router/myRouter.ts'

// const router = useRoute()
// const $router = useRouter()
const activeNav = ref('')
const navs: Ref<{
  id: string,
  src: string,
  titleI18: string,
  route: string,
  test?: boolean,
  disabled?: boolean,
}[]> = ref([
  {
    id: 'chat',
    src: '/matechat/chat-icon.svg',
    titleI18: 'navbar.chat',
    route: 'Chat',
    test: false,
    disabled: false,
  },
  {
    id: 'agent',
    src: '/matechat/chat-icon.svg',
    titleI18: 'navbar.agent',
    route: 'Agent',
    test: true,
  },
  {
    id: 'prompt',
    src: '/matechat/chat-icon.svg',
    titleI18: 'navbar.prompt',
    route: 'Prompt',
    test: true,
  },
  {
    id: 'image',
    src: '/matechat/chat-icon.svg',
    titleI18: 'navbar.image',
    route: 'Image',
    disabled: true,
  },
  {
    id: 'video',
    src: '/matechat/chat-icon.svg',
    titleI18: 'navbar.video',
    route: 'Video',
    disabled: true,
  },
  {
    id: 'speech',
    src: '/matechat/chat-icon.svg',
    titleI18: 'navbar.speech',
    route: 'Speech',
    disabled: true,
  },
])

function clickNav(id) {
  const navItem = navs.value.find(item => item.id === id)
  if (navItem) {
    activeNav.value = id
    /* 自定义路由 */
    myRouter.push({name: navItem.route})
    /* Vue路由 */
    /* $router.push({name: navItem.route}) */
  }
}

function initRouter() {
  // const routeName = router.name
  const routeName = myRouter.currentRoute.name
  if (routeName) {
    const navItem = navs.value.find(item => item.route === routeName)
    if (navItem) {
      activeNav.value = navItem.id
    }
  } else {
    setTimeout(initRouter, 100)
  }
}

onMounted(() => {
  initRouter()
})

watch(() => myRouter.currentRoute.name, initRouter)
</script>

<style scoped lang="scss">
@import "devui-theme/styles-var/devui-var.scss";

:deep(.switch-lang-container) {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  color: $devui-text;
  border-radius: $devui-border-radius-card;
  cursor: pointer;

  &:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }
}

.navbar-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 60px;
  height: 100%;
  box-sizing: border-box;

  .navbar-top,
  .navbar-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .navbar-top {
    margin-top: 12px;

    .navbar-header {
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      gap: 4px;

      img {
        width: 34px;
        height: 34px;
      }

      span {
        line-height: 20px;
        font-size: 11px;
        font-weight: bold;
      }
    }
  }

  .navbar-bottom {
    padding-bottom: 16px;
    gap: 16px;
  }

  :deep(.mc-header-logo-container) {
    flex-direction: column;
    cursor: pointer;

    .mc-header-title.mc-header-title {
      font-size: 10px;
      font-weight: 600;
    }
  }

  .dividing-line {
    width: 32px;
    height: 1px;
    margin: 16px 0;
    background-color: #babbc0;
  }

  .chat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: $devui-font-size-sm;

    .chat-icon-box {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 36px;
      height: 36px;
      border-radius: $devui-border-radius-card;
      cursor: pointer;

      &.active,
      &:hover {
        background-color: $devui-base-bg;
        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
      }

      &.disabled {
        cursor: not-allowed;
        background-color: unset;
        box-shadow: unset;
      }

      .chat-icon-box-disabled {
        position: absolute;
        right: 0;
        top: 0;
        color: red;
        font-size: 16px;
      }

      .chat-icon-box-test {
        display: block;
        position: absolute;
        right: -10px;
        top: -6px;
        color: red;
        background: var(--devui-base-bg, #ffffff);
        padding: 0 2px;
        border-radius: 4px;
        overflow: hidden;
        font-size: 12px;
        line-height: 1;
      }
    }

    span {
      color: $devui-text;
      font-size: $devui-font-size-sm;
      line-height: 20px;
    }
  }

  ::v-deep .system-setting {
    font-size: 20px;
    cursor: pointer;
  }
}

.devui-text {
  color: $devui-text;
}

@media screen and (max-width: 940px) {
  .navbar-container {
    display: none;
  }
}
</style>
